<template>
  <div>
    <!-- 整体 -->
    <div class="user_div">
      <!-- 搜索框 -->
      <div class="user_div_head">
        <div style="margin-top: 15px">
          <el-input
            placeholder="请输入需要查询的用户昵称"
            v-model="searchNickname"
            class="input-with-select"
          >
            <el-select
              v-model="searchStatus"
              slot="prepend"
              placeholder="账号状态"
            >
              <el-option label="正常" value="1"></el-option>
              <el-option label="禁用" value="2"></el-option>
              <el-option label="默认" value=""></el-option>
            </el-select>
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="selectGO"
            ></el-button>
          </el-input>
        </div>
      </div>
      <!-- 列表 -->
      <div class="user_div_main">
        <el-table
          class="user_div_table"
          :data="this.$store.state.userList"
          height="59vh"
          style="width: 100%"
        >
          <el-table-column type="index" label="序号" width="50" align="center">
          </el-table-column>
          <el-table-column label="用户头像" width="120" align="center">
            <template slot-scope="scope">
              <el-avatar :src="scope.row.imgUrl"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column
            prop="nickname"
            width="100"
            label="昵称"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="username" label="用户名" align="center">
          </el-table-column>
          <el-table-column
            prop="phone"
            width="120"
            label="手机号"
            align="center"
          >
          </el-table-column>
          <el-table-column label="账号状态" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
              <el-tag v-if="scope.row.status == 0" type="danger">封禁</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            width="160"
            label="创建时间"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="loginTime"
            width="160"
            label="最后登录时间"
            align="center"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="140"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="fromUpdateById(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteUser(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 弹窗 -->
      <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
        append-to-body
      >
        <el-form :model="fromUpdate" label-width="80px">
          <el-form-item label="昵称:">
            <el-input v-model="fromUpdate.nickname"></el-input>
          </el-form-item>
          <el-form-item label="用户名:">
            <el-input v-model="fromUpdate.username"></el-input>
          </el-form-item>
          <el-form-item label="账号状态:">
            <el-select v-model="fromUpdate.status">
              <el-option label="正常" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="updateUserError">取 消</el-button>
          <el-button type="primary" @click="updateUser">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 分页 -->
      <div class="user_div_footer">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.$store.state.UserTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- <div class="div_form"> -->
    <!-- <el-form :inline="true" :model="formDiv" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="formDiv.nickname"
            placeholder="用户昵称"
          ></el-input> </el-form-item
        ><el-form-item>
          <el-input v-model="formDiv.phone" placeholder="手机号"></el-input>
        </el-form-item>
        <el-date-picker
          v-model="formDiv.createTime"
          type="date"
          placeholder="注册日期"
        >
        </el-date-picker>
        <el-form-item style="margin-left: 20px">
          <el-button
            style="
              width: 120px;
              background-color: orange;
              border: 1px solid orange;
              color: white;
            "
            type="primary"
            @click="onSubmit"
            >查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="div_table">
      <el-table :data="tableData">
        <el-table-column
          prop="nickname"
          label="用户昵称"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="注册时间"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              style="color: rgb(43, 200, 147)"
              @click="LookClick(scope.$index, scope.row)"
              >查看</el-button
            >
            <el-button
              type="text"
              size="small"
              style="color: rgb(255, 51, 51)"
              @click="DeleteClick(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div> -->
  </div>
</template>
<!-- 引入外部CSS文件 -->
<style>
@import url(../../css/UserView.css);
</style>

<script src="../../js/user.js"></script>
